<template>
  <Card>
    <div class="searchBox">
      <Form ref="searchForm" :label-width="90" :model="searchForm" inline>
        <Form-item label="日期：" prop="date">
          <DatePicker
            v-model="searchForm.date"
            placeholder="请选择月份"
            placement="bottom-start"
            style="width: 150px"
            @on-change="searchForm.date=$event"></DatePicker>
        </Form-item>
        <Form-item label="车辆线路：" prop="line">
          <Select v-model="searchForm.line" clearable placeholder="选择线路" style="width:150px;">
            <Option value="-1">全部</Option>
            <Option v-for="item in lines" :key="item.value" :value="item.value">{{ item.label }}</Option>
          </Select>
        </Form-item>
        <Form-item label="类型：" prop="type">
          <Select v-model="searchForm.type" clearable placeholder="选择查询类型" style="width:150px;">
            <Option value="-1">全部</Option>
            <Option v-for="item in typeList" :key="item.value" :value="item.value">{{ item.label }}</Option>
          </Select>
        </Form-item>
        <Form-item label="车牌号：" prop="busNumber">
          <Input v-model="searchForm.busNumber" clearable placeholder="支持模糊搜索" style="width: 150px" type="text"/>
        </Form-item>
        <Form-item label="姓名：" prop="name">
          <Input v-model="searchForm.name" clearable placeholder="支持模糊搜索" style="width: 150px" type="text"/>
        </Form-item>
        <Form-item style="margin-left:-70px;">
          <Button icon="md-search" type="primary" @click="getDataList()">搜索</Button>
          <Button icon="md-refresh" @click="handleResetSearch()">重置</Button>
        </Form-item>
      </Form>
    </div>
    <div class="btns">
      <div style="margin-bottom: 15px;">
        <Button icon="md-add" type="primary" @click="toAdd()">新增</Button>
        <!-- <Button @click="saveEvent" type="success">保存</Button> -->
        <Button type="error" @click="removeEvent()">删除选中</Button>
      </div>
    </div>
    <vxe-table
      ref="xTable"
      :data="tableData"
      :loading="listLoading"
      :mouse-config="{selected: true}"
      border
      highlight-cell
      keep-source
      max-height="400"
      show-overflow>
      <vxe-table-column type="checkbox" width="60"></vxe-table-column>
      <vxe-table-column align="center" type="seq" width="100"></vxe-table-column>
      <vxe-table-column field="date" title="日期">
      </vxe-table-column>
      <vxe-table-column field="name" title="姓名"></vxe-table-column>
      <vxe-table-column field="line" title="线路"></vxe-table-column>
      <vxe-table-column field="busNumber" title="车牌号"></vxe-table-column>
      <vxe-table-column field="type" title="类型"></vxe-table-column>
      <vxe-table-column field="duration" title="时长"></vxe-table-column>
    </vxe-table>

    <Modal v-model="modal" :mask-closable="false" :styles="{ top: '20px' }" title="添加考勤上报数据" width="400">
      <Form ref="addForm" :label-width="100" :model="addForm" :rules="validRules">
        <Row>
          <FormItem label="日期" prop="date">
            <DatePicker v-model="addForm.date" placeholder="请选择日期" placement="bottom-end" type="date"></DatePicker>
          </FormItem>
        </Row>
        <Row>
          <FormItem label="司机名称" prop="name">
            <Input v-model="addForm.name" placeholder></Input>
          </FormItem>
        </Row>
        <Row>
          <FormItem label="车牌号" prop="busNumber">
            <Input v-model="addForm.busNumber" placeholder></Input>
          </FormItem>
        </Row>
        <Row>
          <FormItem label="类型" prop="type">
            <Select v-model="addForm.type" clearable placeholder="选择上报类型">
              <Option v-for="item in typeList" :key="item.value" :value="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
        </Row>
        <Row>
          <FormItem label="线路" prop="line">
            <Select v-model="addForm.line" clearable placeholder="选择线路">
              <Option v-for="item in lines" :key="item.value" :value="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
        </Row>
      </Form>
      <div slot="footer">
        <Button @click="handleResetForm('addForm')">重置</Button>
        <Button
          :loading="submitLoading"
          style="margin-left: 8px"
          type="primary"
          @click="handleSubmitForm('addForm')">保存
        </Button>
      </div>
    </Modal>
  </Card>
</template>
<script>
import {attendanceDataList, destroy, getReportType, store, updateAttendanceData,} from '../../api/attendanceData'

export default {
  data() {
    return {
      modal: false,
      submitLoading: false,
      listLoading: false,
      tableData: [],
      typeList: [],
      validRules: {
        date: [{required: true, message: '请选择日期'}],
        type: [{required: true, message: '请选择类型'}],
        name: [{required: true, message: '请填写驾驶员姓名'}],
        busNumber: [{required: true, message: '车牌号必须填写不能为空'}],
      },
      addForm: {
        date: '',
        name: '',
        line: '',
        busNumber: '',
        type: '',
      },
      searchForm: {
        date: '',
        name: '',
        line: '-1',
        busNumber: '',
        type: '-1',
      },
      lines: [],
    }
  },
  mounted() {
    this.getTypeList()
  },
  created() {
    this.getDataList()
    this.getLinesArray()
  },
  methods: {
    async getLinesArray() {
      this.lines = await this.getLines()
    },
    getTypeList() {
      getReportType().then((res) => {
        if (res.data) {
          this.typeList = res.data
        }
      })
    },
    getDataList() {
      this.listLoading = true
      attendanceDataList(this.searchForm).then((res) => {
        this.tableData = res.data.attendanceRecord
        this.searchForm.date = res.data.date
        this.searchForm.name = res.data.name
        this.searchForm.line = res.data.line
        this.searchForm.busNumber = res.data.busNumber
        this.searchForm.type = res.data.type
        this.listLoading = false
      })
    },
    //搜索条件重置
    handleResetSearch() {
      this.$refs.searchForm.resetFields()
      this.getDataList()
    },
    //条件搜素
    handleSearch() {
      this.getDataList()
    },
    //列表保存编辑
    saveEvent() {
      const updateRecords = this.$refs.xTable.getUpdateRecords()
      if (updateRecords.length === 0) {
        this.$message.info('未编辑数据')
      } else {
        this.listLoading = true
        updateAttendanceData(updateRecords).then((res) => {
          if (res.data) {
            this.$Message.success(res.message)
            this.getDataList()
          } else {
            this.$Message.error(res.message)
          }
        })
      }
    },
    //添加
    toAdd() {
      this.$refs.addForm.resetFields()
      this.modal = true
    },
    //表单重置
    handleResetForm() {
      this.$refs.addForm.resetFields()
    },
    //表单提交
    handleSubmitForm() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.submitLoading = true
          store(this.addForm).then((res) => {
            this.submitLoading = false
            if (res.data) {
              this.modal = false
              this.$Message.success(res.message)
              this.getDataList()
              this.$refs.addForm.resetFields()
            } else {
              // console.log(res.message);
              this.$Message.error(res.message)
            }
          })
        }
      })
    },
    // 批量删除
    removeEvent(row) {
      const selectRecords = this.$refs.xTable.getCheckboxRecords() //获取选中
      console.log(selectRecords)
      if (selectRecords.length <= 0) {
        this.$Message.warning('您还未选择要删除的数据')
        return
      }
      this.$XModal
        .confirm('您确定要删除' + selectRecords.length + '条数据?')
        .then((type) => {
          if (type === 'confirm') {
            let ids = ''
            selectRecords.forEach(function (e) {
              ids += e.id + ','
            })
            ids = ids.substring(0, ids.length - 1)
            // console.log(ids);
            destroy(ids).then((res) => {
              if (res.data) {
                this.$Message.success(res.message)
                this.$refs.xTable.removeCheckboxRow() //删除选中
              } else {
                this.$Message.error(res.message)
              }
            })
          }
        })
    },
  },
}
</script>
<style>
.vxe-select--panel {
  z-index: 9999 !important;
}

.vxe-input--panel.type--date {
  z-index: 9999 !important;
}

.my_table_insert .vxe-body--row.is--new {
  background-color: #f1fdf1;
}

.vxe-table--header {
  width: 100% !important;
}

.vxe-table--empty-placeholder {
  top: 48px !important;
}
</style>
